<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始设置 - JAVA</title>
    <!-- Material Design fonts -->
    <!--<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">-->
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
    <!-- Admin LTE-->
    <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
    <!--jquery-->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/css/ionicons.min.css">
    <!-- Bootstrap Material Design -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-material-design.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/ripples.min.css">

    <link rel="stylesheet" href="/static/css/skins/skin-blue.min.css">

    <script src="/static/js/material.min.js"></script>
    <script src="/static/js/ripples.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/socketio.min.js"></script>
    <script>
      var AdminLTEOptions = {
        //Enable sidebar expand on hover effect for sidebar mini
        //This option is forced to true if both the fixed layout and sidebar mini
        //are used together
        sidebarExpandOnHover: true,
        //BoxRefresh Plugin
        enableBoxRefresh: true,
        //Bootstrap.js tooltip
        enableBSToppltip: true
      };

      $.material.init();
    </script>

    <style>
        #reg-box-msg{
            padding-bottom:0;
        }

        div.form-group{
            margin-top: 0 !important;
        }

        div.radio label{
            color: #1a2226 !important;
        }

        p.hint-msg{
            text-align: center;
            font-size:16px;
        }

        div.login-box{
            width: 400px;
        }
        
        div.msg-box{
            position: relative;
            margin-bottom:10px;
        }
        div.overlay{
            background-color: rgba(180,180,180,0.08);
            height:100%;
            width:100%;
            position:absolute;
            padding-top:1.6em;
        }

        div.overlay-msg{
            font-size:18px;
            margin-top:0.5em;
            text-align: center;
            color: #777;
        }
        [v-cloak]{
            display: none;
        }
        label span._sys_dir{
            -ms-word-break: break-word;
            word-break:break-word;
        }

        label{
            display: block;
            padding-left:2.4em !important;
        }
        label span._sys_name{
            display: inline-block;
            color: black;
        }

        label span._sys_dir{
            color: gray;
            font-size : 0.8em;
            display: inline-block;
        }

        span._float{
            position:relative;
        }

        div.modal-body span.pg{
            display: inline-block;
            margin-bottom: 5px;
            color: #777;
            font-size: 13px;
        }
    </style>

    <script>
        Vue.config.delimiters = ['${','}'];

        var system_java_exists = true;
        function getCurrentHost(){
            var http = location.protocol;
            var slashes = http.concat("//");
            var host = slashes.concat(window.location.hostname);
            return host;
        }

        var _generate_flag = function (num) {
            var series = "0123456789abcdefghijklmnopqrstuvwxyzZ";
            var str = "";
            for(var i=0;i<num;i++){
                str += series[Math.floor(Math.random() * 36)]
            }
            return str;
        };

        function update_java_environment(vm){
            $.get("/startup/detect_java_environment",function (data) {
                try{
                    d = JSON.parse(data);
                    if(d.status == "success"){
                        var info = d.info;
                        vm.loading = false;

                        var system_java_arr = info['system'];
                        var user_java_arr   = info['user'];
                        if(system_java_arr.length == 0 && user_java_arr.length == 0){
                            vm.no_java_env = true;
                        }else{
                            if(system_java_arr.length == 0){
                                vm.java_info = info['user'];
                                system_java_exists = false;
                            }else{
                                vm.java_info.push(info['system'][0]);
                                for(var k = 0; k< user_java_arr.length;k++){
                                    vm.java_info.push(info['user'][k]);
                                }
                            }
                        }
                        //set default index
                        vm.java_env_index = info['user'].length;
                    }else{
                        vm.fetch_java_data_error = true;
                    }
                }catch (e){
                    vm.fetch_java_data_error = true;
                }
            });
        }
        var _idf;
        var socket = io.connect(getCurrentHost()+":5001");
        var current_hash = "";
        $(document).ready(function () {
            var self = this;
            var vm = new Vue({
                el:"#java-form",
                data:{
                    "loading" : true,
                    "no_java_env" : false,
                    "fetch_java_data_error" : false,
                    "java_env_index" : -1,
                    "java_info" : []
                },
                ready:function () {
                    var self = this;
                    update_java_environment(self);
                },
                methods:{
                    "radio_click" : function(index){
                        if(system_java_exists){
                            vm.java_env_index = index;
                        }else{
                            vm.java_env_index = index + 1;
                        }
                    },
                    "down_java" : function (e) {
                        var flag = _generate_flag(16);
                        var start_download_json = {
                            "event":"downloader.download_newest_java",
                            "flag" : flag,
                            "props": {}
                        };

                        socket.emit("message_startup", start_download_json);
                        $('#download_java_modal').modal({backdrop: 'static', keyboard: false});
                    }
                }
            });

            var modal_vm = new Vue({
                el:"#download_java_modal",
                data:{
                    download_size:"0",
                    total_size:"0",
                    percent:"0%",
                    "modal_finish": false,
                    "terminate_hint" : false
                },
                methods: {
                    "terminate_downloading" : function (e) {
                        var self = this;
                        console.log(current_hash);
                        if(current_hash != ""){
                            var flag = _generate_flag(16);
                            var terminate_download_json = {
                                "event":"downloader.terminate_task",
                                "flag" : flag,
                                "props": {
                                    "hash" : current_hash
                                }
                            };
                            socket.emit("message_startup", terminate_download_json);
                        }
                    },
                    "regret_cancel_task" : function (e) {
                        var self = this;
                        this.terminate_hint = false;
                    },
                    "enter_cancel_task" : function (e) {
                        this.terminate_hint = true;
                    }
                }
            });

            socket.on("message", function (msg) {
                function _to_file_size(size){
                    // GB
                    if(size > 1024 * 1024 * 1024){
                        _s = size / (1024 * 1024 * 1024);
                        return _s.toFixed(1)+"G"
                    }else if(size > 1024 * 1024){
                        _s = size / (1024 * 1024);
                        return _s.toFixed(1)+"M"
                    }else if(size > 1024){
                        _s = size / (1024);
                        return _s.toFixed(1)+"K"
                    }else{
                        _s = size;
                        return _s.toFixed(1)+"K"
                    }
                }
                if(msg.event == "_get_progress"){
                    var _dw = msg['result'][0];
                    var _total = msg['result'][1];
                    modal_vm.download_size = _to_file_size(_dw);
                    modal_vm.total_size = _to_file_size(_total);
                    modal_vm.percent = (_dw / _total * 100).toFixed(1) + "%";
                }else if(msg.event == "_download_start"){
                    current_hash = msg["hash"];

                }else if(msg.event == "_terminate_task"){
                    if(msg.result == true){
                        // reinit data
                        modal_vm.download_size = "0";
                        modal_vm.total_size = "0";
                        modal_vm.percent="0%";
                        modal_vm.modal_finish=false;

                        setTimeout(function(){
                            $('#download_java_modal').modal('hide');
                        },500);
                    }
                }else if(msg.event == "_download_finish"){
                  var hash = msg["hash"];
                  var success = msg["result"];

                  if(success && hash == current_hash){
                      modal_vm.modal_finish = true;
                      modal_vm.download_size = modal_vm.total_size;
                      modal_vm.percent = "100%";
                      modal_vm.percent = "下载完成";
                  }
                }else if(msg.event == "_extract_finish"){
                    var hash = msg["hash"];
                    var success = msg["result"];

                    if(success && hash == current_hash){
                        update_java_environment(vm);
                    }
                }
            });
        });
    </script>
</head>

<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <b>Obsidian</b> Panel
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg" id="reg-box-msg">
        <b>STEP 2</b>: JAVA 环境设置
    </p>
      <hr>

    <form action="/startup/?step=3" method="post" id="java-form">
        <div class="msg-box" style="min-height: 150px;">
            <div class="overlay" v-show="loading" v-cloak>
                <div class="overlay-msg">
                    正在检测JAVA环境中...请稍等片刻
                </div>
                <div class="overlay-msg" style="font-size:30px;"><i class="fa fa-spin fa-refresh"></i></div>
                <div class="overlay-msg" id="refresh_error" v-show="fetch_java_data_error" v-cloak>读取数据出错:-( 请刷新以重试</div>
            </div>

            <div class="row" v-show="!loading && no_java_env" v-cloak>
                <div class="col-xs-12 hint-msg" >
                    <p class="hint-msg">未检测到java环境，是否现在安装？</p>
                    <p class="hint-msg"><button type="button" class="btn btn-raised btn-sm" v-on:click="down_java">安装java环境</button></p>
                </div>
            </div>
            <div class="form-group" v-show="!loading && !no_java_env" v-cloak>
                <input type="hidden" name="java_env_index" v-model="java_env_index">
                <div v-for="item in java_info">
                    <div class="radio">
                        <label>
                            <input type="radio" name="java_env" checked v-on:click="radio_click($index)">
                            <span class="circle"></span><span class="check"></span>
                            <span class="_sys_name _float">${item.name}</span> <br>
                            <span class="_sys_dir _float">${item.dir}</span>
                        </label>
                    </div>
                </div>
                <button type="button" class="btn btn-raised btn-sm" v-on:click="down_java">添加最新java环境</button>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12">
                <div style="text-align: right;"><a href="/startup/?step=3">跳过此步骤</a></div>
            </div>
            <div class="col-xs-4">
            </div>
            <!-- /.col -->
            <div class="col-xs-8" style="text-align:right;">
                <button type="submit" class="btn btn-raised btn-info">下一步</button>
            </div>
            <!-- /.col -->
        </div>
    </form>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- Modal -->
<div class="modal fade" id="download_java_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_tag">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel_tag">下载 JAVA</h4>
      </div>
      <div class="modal-body">
          <div class="row">
              <div class="col-xs-8"><span>Java版本：1.8.0_102</span></div>
              <div class="col-xs-6"><span class="pg">${download_size} / ${total_size}</span></div>
              <div class="col-xs-6" style="text-align:right;"><span class="pg">${percent}</span></div>
          </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="progress">
                    <div class="progress-bar" v-bind:style="{width: percent}"></div>
                </div>
            </div>
        </div>
      </div>
        <div class="modal-footer" v-show="terminate_hint == true" v-cloak>
            <span style="color: gray;">确定要「取消」下载任务？任务及已下载的文件将会被<b>删除！</b></span>
            <button type="button" class="btn btn-raised btn-info" v-on:click="terminate_downloading"
                    data-toggle="tooltip" data-placement="bottom" title="" v-cloak>确认!</button>
            <button type="button" class="btn btn-default" v-on:click="regret_cancel_task">返回</button>
        </div>
        <div class="modal-footer" v-show="terminate_hint == false" v-cloak>
            <button type="button" class="btn btn-raised btn-default" v-show="!modal_finish" v-on:click="enter_cancel_task"
                    data-toggle="tooltip" data-placement="bottom" title="" v-cloak>取消</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" v-show="modal_finish" v-cloak>完成</button>
        </div>
    </div>
  </div>
</div>

</body>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });
    $.material.init();
</script>
</html>

